<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>添加一样</button>
    <table border="1">
        <thead>
            <tr bgcolor="gray">
                <td>服装</td>
                <td>家电</td>
                <td>家居</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>旧毛衣</td>
                <td>旧电脑</td>
                <td>旧沙发</td>
                <td><a href="##">删除</a></td>
            </tr>
        </tbody>
    </table>
    <script>
        /* 编写JS代码
            1. 获取button按钮
            2. 点击按钮,往tbody当中添加内容
                2.1 给button绑定一个点击事件
                2.2 创建tr标签,用于追加到tbody的最后面
                        循环三次,创建三个td,将td追加到tr的最后面
                        循环完毕,再创建一个删除链接
        */
        //获取button按钮
        var btn = document.querySelector("button")
        var tbody = document.querySelector("tbody")
        /* 绑定点击事件 */
        btn.onclick = function(){
            //创建tr
            var tr = document.createElement("tr")
            //循环三次创建三个td
            for(var i = 0 ; i < 3 ; i++){
                //创建td
                var td = document.createElement("td")
                switch(i){
                    case 0:
                        //添加一个服装
                        var text = prompt("请输入服装!!")
                        while(!text.trim()){
                            window.alert("不能输入空的")
                            text = prompt("请输入服装!!")
                        }
                        //将我们输入的值用于td的文本值
                        td.innerHTML = text;
                        break;
                    case 1:
                        //添加一个家具
                        var text = prompt("请输入家具!!")
                        while(!text.trim()){
                            window.alert("不能输入空的")
                            text = prompt("请输入家具!!")
                        }
                        //将我们输入的值用于td的文本值
                        td.innerHTML = text;
                        break;
                    case 2:
                        //添加一个家电
                        var text = prompt("请输入家电!!")
                        while(!text.trim()){
                            window.alert("不能输入空的")
                            text = prompt("请输入家电!!")
                        }
                        //将我们输入的值用于td的文本值
                        td.innerHTML = text;
                        break;
                }
                //将td追加到tr的最后面
                tr.appendChild(td)
            }
            /* 手动添加一个删除的td按钮 ,这个td里面包含了a标签*/
            var td = document.createElement("td");
            td.innerHTML = `<a href="##">删除</a>`
            tr.appendChild(td)
            //将tr追加到tbody的最后面
            tbody.appendChild(tr)
        }
    </script>
</body>
</html>